<template>
  <div>
    <el-col :span="24">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card class="box-card">
            <el-descriptions class="margin-top " :contentStyle="CS" :label-style="LS" title="" :column="3" size="medium" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-c-scale-to-original"></i>
                  申请单号
                </template>
                {{form.nos}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-time"></i>
                  申请时间
                </template>
                {{form.applyTime}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  申请金额
                </template>
                {{form.totalMoney}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  剩余金额
                </template>
                {{form.remainMoney}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  已支付金额
                </template>
                {{form.paidMoney}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  采购单号
                </template>
                {{form.lvBuy.nos}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  采购类别
                </template>
                <dict-tag :options="dict.type.caigou_type" :value="form.lvBuy.ywType"/>
              </el-descriptions-item>



              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  名称
                </template>
                {{form.supplierName}}{{form.personName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  银行名称
                </template>
                {{form.bankName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-c-scale-to-original"></i>
                  银行行号
                </template>
                {{form.bankNo}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  银行账号
                </template>
                {{form.accountNo}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  制单人
                </template>
                {{form.createBy}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-c-scale-to-original"></i>
                  审核状态
                </template>
                <dict-tag :options="dict.type.apply_assess_status" :value="form.assessStatus"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  支付状态
                </template>
                <dict-tag :options="dict.type.apply_pay_status" :value="form.payStatus"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  发票编号
                </template>
                {{form.invoiceCode}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  备注
                </template>
                {{form.remark}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  审计意见
                </template>
                {{ form.auditOpinion }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  审计时间
                </template>
                {{ parseTime(form.auditTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  审计人
                </template>
                {{form.auditBy}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  终审意见
                </template>
                {{ form.assessOpinion }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  终审时间
                </template>
                {{ parseTime(form.assessTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  终审人
                </template>
                {{form.assessBy}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  发票照片
                </template>
                <file-upload-show :value="form.invoicePhoto"></file-upload-show>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  导出
                </template>
                <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleExport"
                           v-hasPermi="['develop:LvDo:add']">导出明细</el-button>
              </el-descriptions-item>

            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="form.type !=='4'">
          <el-table border v-loading="loading" :data="payApplyBuyDetailList" ref="table" show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" align="center" width="50" fixed="left"/>
            <el-table-column  label="采购单号" align="center" prop="params.buyNos"/>
            <el-table-column  label="产品名称" align="center" prop="goodsName"/>
            <el-table-column  label="产品型号" align="center" prop="goodsModel"/>
            <el-table-column label="存货编码" align="center" prop="goodsCode"/>
            <el-table-column label="数量" align="center" prop="buyDetail.shengyu"/>
            <el-table-column label="吨位" align="center" prop="buyDetail.dun"/>
            <el-table-column label="单价/吨价" align="center" prop="buyDetail.goodsBuyPrice"/>
            <el-table-column label="源单金额" align="center" prop="buyDetail.goodsBuyTotal"/>
            <el-table-column label="申请金额" align="center" prop="money"/>
            <el-table-column label="备注" align="center" prop="remark"/>
          </el-table>
        </el-col>
      </el-row>
    </el-col>

  </div>
</template>

<script>
import {
  accAdd,
  deleteAction, downloadFile,
  getAction, getById
} from '@/api/manage'
  import GoodsInvoiceDetail from '@/views/develop/goodsInvoiceDetail/module/GoodsInvoiceDetail'
  import FileUploadShow from "@/components/FileUpload/FileUploadShow.vue";

  export default {
    name: "PayApplyDetailSection",
    dicts: ["apply_pay_status", "apply_assess_status","caigou_type"],
    components: {
      FileUploadShow,
      GoodsInvoiceDetail,
    },
    props: {
      applyId: {
        type: String,
        default: "",
      },
    },
    watch: {
      applyId: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.getApplyInfo();
          }
        },
        immediate: true
      },
    },
    data() {
      return {
        activeName: "first",
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 核销明细信息管理表格数据
        payApplyBuyDetailList: [],
        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'min-width': '110px',
          'word-break': 'keep-all'
        },
        form:{},
        url: {
          list: '/goodsInvoiceDetail/goodsInvoiceDetail/listMingxi',
          remove: '/goodsInvoiceDetail/goodsInvoiceDetail/',
          export: '/goodsInvoiceDetail/goodsInvoiceDetail/export',
          getWithShippingFee: '/payApply/payApply/getWithShippingFee/',
        },
      };
    },
    created() {

    },
    methods: {
      getApplyInfo() {
        getById(this.url.getWithShippingFee,this.applyId).then(response => {
          this.form = response.data;
          this.loading = false;
          this.payApplyBuyDetailList = response.data.payApplyBuyDetailList;
        });
      },
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          let values ;
          if(column.property === "buyDetail.goodsBuyTotal"){
            values = data.map((item) => Number(item.buyDetail.goodsBuyTotal));
          }else if(column.property === "buyDetail.shengyu"){
            values = data.map((item) => Number(item.buyDetail.shengyu));
          }else if(column.property === "buyDetail.dun"){
            values = data.map((item) => Number(item.buyDetail.dun));
          }else{
            values = data.map((item) => Number(item[column.property]));
          }
          // 只合计amount1和amount3，想合并哪些列就在这里指定
          if (column.property === "buyDetail.shengyu" || column.property === "buyDetail.goodsBuyTotal"
            || column.property === "buyDetail.dun" || column.property === "money") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return accAdd(prev , curr);
              } else {
                return prev;
              }
            }, 0);
          }
        });
        return sums;
      },

      handleExport(){
        let that = this;
        that.loading = false;
        that.$confirm('是否确认导出付款申请明细表?', "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          downloadFile('/payApplyBuyDetail/payApplyBuyDetail/export', {"payApplyId":that.form.id});
        });
      }
    }
  };
</script>
